<template>
	<view class="box">
		<view>
			<view class="wrap">
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index">
							</u-lazy-load>
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="pri">
								<view class="demo-price">
									￥{{item.price}}
								</view>
								<view class=".demo-price1 ">
									￥{{item.price1}}
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index">
							</u-lazy-load>
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="pri">
								<view class="demo-price">
									￥{{item.price}}
								</view>
								<view class=".demo-price1 ">
									￥{{item.price1}}
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
				<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				value: '',
				list: [{
						price: 135,
						title: '老年足疗按摩服务精准按摩足部穴位',
						image: 'https://s1.ax1x.com/2023/03/22/ppd5BHe.png',
						price1: 1333
					},
					{
						price: 725,
						title: '老年头部按摩放松神经可上门服务为您带来良好体验',
						image: 'https://s1.ax1x.com/2023/03/22/ppd5Uc6.png',
						price1: 2999
					},
					{
						price: 385,
						title: '老年康复训练三甲级医院康复师还您好身体',
						image: 'https://s1.ax1x.com/2023/03/22/ppd52gP.png',
						price1: 2199
					},
					{
						price: 784,
						title: '艾灸服务神清气爽适合老年病的舒缓',
						image: 'https://s1.ax1x.com/2023/03/22/ppd5Rjf.png',
						price1: 3999
					},

					{
						price: 784,
						title: '艾灸服务神清气爽适合老年病的舒缓',
						image: 'https://s1.ax1x.com/2023/03/22/ppd5HCn.png',
						price1: 2999
					},
					{
						price: 784,
						title: '艾灸服务神清气爽适合老年病的舒缓',
						image: 'https://s1.ax1x.com/2023/03/22/ppd5b3q.png',
						price1: 2999
					},
					{
						price: 784,
						title: '艾灸服务神清气爽适合老年病的舒缓',
						image: 'https://s1.ax1x.com/2023/03/22/ppd5XuT.png',
						price1: 2999
					},
				]
			}
		},
		methods: {
			toChange(index) {
				this.current = index
			},
			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background-color: white;

		.head {
			width: 100%;
			height: 6vh;
			display: flex;
			justify-content: space-between;
			background-color: #ff9900;
			position: sticky;
			top: 0;
			z-index: 1;

			u-icon {
				padding-left: 7%;
			}

			u-button {
				width: 20%;
				padding-top: 1%;
				padding-right: 7%;
			}
		}

		.friends {
			width: 90%;
			margin: 5% auto auto auto;
			height: 55%;
			display: flex;
			flex-direction: column;
			background-color: white;

			.friendsTitle {
				display: flex;
				width: 100%;
				height: 10%;

				.username {
					font-size: 25rpx;
					padding-top: 2%;
					padding-left: 1%;
				}
			}

			.comment {
				font-size: 30rpx;
				padding: 0;
				margin: 0;
			}

			.time {
				display: flex;
				justify-content: space-between;
				padding-top: 1%;

				text {
					font-size: 25rpx;
				}
			}

			.like {
				display: flex;
				justify-content: space-between;
				padding-top: 1%;
			}

			.mycomment {
				display: flex;
				width: 100%;
				height: 10%;
				padding-top: 2%;
			}
		}

		.wrap {
			padding: 40rpx;
		}
	}
</style>
<style lang="scss" scoped>
	::v-deep button.u-btn--default {
		height: 80%;
	}
</style>
<style lang="scss" scoped>
	.demo-warter {
		// border: 0.5pt solid rgba(144, 144, 144, 0.25);
		border-radius: 8px;
		margin: 0 2% 20% 2%;
		background-color: #ffffff;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}

	.demo-tag-owner {
		// background-color: $u-type-error;
		// color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 4rpx 4rpx 0;
		border-radius: 50rpx;
		font-size: 25rpx;
		line-height: 1;
	}

	.demo-tag-text {
		// border: 1px solid $u-type-primary;
		// color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		font-weight: bold;
		color: gray;
		margin-top: 5px;
	}

	.demo-price1 {
		font-size: 25rpx;
		// font-weight: bold;
		text-decoration: line-through;
		color: gray;
		margin-top: 5px;
		margin-right: 15rpx;
	}

	.pri {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-end;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
